<!--
 * @Author: HaoyangDu@wits.com
 * @description: 
 * @param: 
 * @return: 
-->
<template>
  <img src="../login/img/bg.png" alt="" class="bg" />
  <img src="../login/img/logo.png" alt="" class="logo" />
  <img src="../login/img/Password_icon.png" alt="" class="icon" />
  <div class="topSitting">头部占位</div>
  <div class="formArea">
    <up-form customStyle="margin:0" :model="update">
      <up-form-item prop="oldPwd">
        <up-input
          v-model="update.oldPwd"
          border="none"
          placeholderStyle="color:#999999;opacity:0.85;"
          placeholder="请输入原密码"
        ></up-input>
      </up-form-item>
      <up-form-item prop="newPwd">
        <up-input
          v-model="update.newPwd"
          border="none"
          placeholderStyle="color:#999999;opacity:0.85;"
          placeholder="请输入新密码"
        ></up-input>
      </up-form-item>
      <up-form-item prop="reNewPwd">
        <up-input
          v-model="update.reNewPwd"
          border="none"
          placeholderStyle="color:#999999;opacity:0.85;"
          placeholder="请再次输入新密码"
        >
        </up-input>
      </up-form-item>
    </up-form>
  </div>
  <div class="bottomLine"></div>
  <div class="loginBtn" @click="okUpdate">确认修改</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as http from "../../utils/http";

const update = reactive({
  oldPwd: "",
  newPwd: "",
  reNewPwd: "",
});
import { useAppStore } from "../../store/index";
const store = useAppStore();
// 确认修改
const okUpdate = () => {
  if (update.oldPwd && update.newPwd && update.newPwd === update.reNewPwd) {
    http
      .updatePassword({
        userId: store.userId,
        originalPassword: update.oldPwd,
        newPassword: update.newPwd,
        confirmNewPassword: update.reNewPwd,
      })
      .then((res) => {
        // #判断是否修改成功
        if (res.code === "200") {
          // 清除本地缓存
          wx.removeStorageSunc("token");
          // 重新登录
          wx.reLaunch({
            url: "../login/login",
          });
        } else {
          wx.showToast({
            title: "修改失败，请重新修改",
            icon: "none",
            mask: "true",
            duration: 1000,
          });
        }
      });
  } else {
    wx.showToast({
      title: "请正确输入",
      icon: "none",
      mask: "true",
      duration: 1000,
    });
  }
};
</script>

<style scoped lang="scss">
.topSitting {
  height: 520rpx;
  opacity: 0;
}
.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -9999;
}
.logo {
  width: 340rpx;
  height: 56rpx;
  position: absolute;
  left: 205rpx;
  top: 276rpx;
}
.icon {
  width: 384rpx;
  height: 68rpx;
  position: absolute;
  left: 63rpx;
  top: 422rpx;
}
.formArea {
  padding-left: 62rpx;
  padding-right: 84rpx;
  padding-bottom: 52rpx;
  .getCode {
    position: relative;
    width: 153rpx;
    height: 52rpx;
    line-height: 52rpx;
    border-radius: 26rpx;
    text-align: center;
    color: #406eb0;
    font-size: 24rpx;
    .getCodeBg {
      width: 100%;
      height: 100%;
      border-radius: 26rpx;
      background-color: #3a8ff8;
      opacity: 0.15;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -99;
    }
  }
}
.bottomLine {
  height: 1rpx;
  margin-left: 50rpx;
  margin-right: 90rpx;
  background-color: #979797;
  opacity: 0.2;
}
.loginBtn {
  width: 590rpx;
  height: 88rpx;
  margin: 122rpx 80rpx;
  border-radius: 44rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #3277f2;
  color: #fff;
  opacity: 49%;
}
</style>
